<template>
    <div
        :class="{
            'message-input-container': true,
            'message-input-container-h5': !isPC
        }"
    >
        <div v-if="props.isMuted" class="message-input-mute">
            {{ props.muteText }}
        </div>
        <input
            id="editor"
            ref="inputRef"
            v-model="inputText"
            :adjust-position="true"
            cursor-spacing="20"
            confirm-type="send"
            :confirm-hold="true"
            maxlength="140"
            type="text"
            placeholder-class="input-placeholder"
            class="message-input-area"
            :placeholder="props.placeholder"
            auto-blur
            @confirm="handleSendMessage"
            @input="onInput"
            @blur="onBlur"
            @focus="onFocus"
        />
    </div>
</template>
<script lang="ts" setup>
import { ref, watch, onMounted, onUnmounted } from '../../../adapter-vue'
import { TUIStore, StoreName, IConversationModel } from '@tencentcloud/chat-uikit-engine'
import { TUIGlobal } from '@tencentcloud/universal-api'
import { transformTextWithEmojiNamesToKeys } from '../emoji-config'
import { isPC } from '../../../utils/env'
import { sendMessages } from '../utils/sendMessage'
import { ISendMessagePayload } from '../../../interface'

const props = defineProps({
    placeholder: {
        type: String,
        default: 'this is placeholder'
    },
    replayOrReferenceMessage: {
        type: Object,
        default: () => ({}),
        required: false
    },
    isMuted: {
        type: Boolean,
        default: true
    },
    muteText: {
        type: String,
        default: ''
    },
    enableInput: {
        type: Boolean,
        default: true
    },
    enableAt: {
        type: Boolean,
        default: true
    },
    enableTyping: {
        type: Boolean,
        default: true
    },
    isGroup: {
        type: Boolean,
        default: false
    }
})

const emits = defineEmits(['onTyping', 'onFocus', 'onAt'])
const inputText = ref('')
const inputRef = ref()
const inputBlur = ref(true)
const inputContentEmpty = ref(true)
const allInsertedAtInfo = new Map()
const currentConversation = ref<IConversationModel>()

onMounted(() => {
    TUIStore.watch(StoreName.CONV, {
        currentConversation: onCurrentConversationUpdated
    })

    uni.$on('insert-emoji', (data) => {
        inputText.value += data?.emoji?.name
    })

    uni.$on('send-message-in-emoji-picker', () => {
        handleSendMessage()
    })
})

onUnmounted(() => {
    uni.$off('insertEmoji')
    uni.$off('send-message-in-emoji-picker')

    TUIStore.unwatch(StoreName.CONV, {
        currentConversation: onCurrentConversationUpdated
    })
})

const handleSendMessage = () => {
    const messageList = getEditorContent()
    resetEditor()
    console.log('messageList', messageList)
    sendMessages(messageList as any, currentConversation.value!)
}

const insertAt = (atInfo: any) => {
    if (!allInsertedAtInfo?.has(atInfo?.id)) {
        allInsertedAtInfo?.set(atInfo?.id, atInfo?.label)
    }
    inputText.value += atInfo?.label
}

const getEditorContent = () => {
    let text = inputText.value
    text = transformTextWithEmojiNamesToKeys(text)
    const atUserList: string[] = []
    allInsertedAtInfo?.forEach((value: string, key: string) => {
        if (text?.includes('@' + value)) {
            atUserList.push(key)
        }
    })
    const payload: ISendMessagePayload = {
        text
    }
    if (atUserList?.length) {
        payload.atUserList = atUserList
    }
    return [
        {
            type: 'text',
            payload
        }
    ]
}

const resetEditor = () => {
    inputText.value = ''
    inputContentEmpty.value = true
    allInsertedAtInfo?.clear()
}

const setEditorContent = (content: any) => {
    inputText.value = content
}

const onBlur = () => {
    inputBlur.value = true
}

const onFocus = (e: any) => {
    inputBlur.value = false
    emits('onFocus', e?.detail?.height)
}

const isEditorContentEmpty = () => {
    inputContentEmpty.value = inputText?.value?.length ? false : true
}

const onInput = (e: any) => {
    // uni-app recognizes mention messages
    const text = e?.detail?.value
    isEditorContentEmpty()
    if (props.isGroup && (text.endsWith('@') || text.endsWith('@\n'))) {
        TUIGlobal?.hideKeyboard()
        emits('onAt', true)
    }
}

watch(
    () => [inputContentEmpty.value, inputBlur.value],
    (newVal: any, oldVal: any) => {
        if (newVal !== oldVal) {
            emits('onTyping', inputContentEmpty.value, inputBlur.value)
        }
    },
    {
        immediate: true,
        deep: true
    }
)

function onCurrentConversationUpdated(conversation: IConversationModel) {
    currentConversation.value = conversation

    console.log('conversation111111111', conversation)
}

defineExpose({
    insertAt,
    resetEditor,
    setEditorContent,
    getEditorContent
})
</script>

<style lang="scss" scoped>
@import '../../../assets/styles/common';

.message-input-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 3px 10px 10px;
    overflow: hidden;

    &-h5 {
        flex: 1;
        height: auto;
        background: #fff;
        border-radius: 10px;
        padding: 7px 0 7px 10px;
        font-size: 16px !important;
        max-height: 86px;
    }

    .message-input-mute {
        flex: 1;
        display: flex;
        color: #999;
        font-size: 14px;
        justify-content: center;
        align-items: center;
    }

    .message-input-area {
        flex: 1;
        display: flex;
        overflow-y: scroll;
        min-height: 25px;
    }
}
</style>
